<template>
    <div>
        <topImage :topList="topList"></topImage>
        <card v-for="item in list" :key="item.id" :book="item"></card>
        <p class="text-footer" v-if="!more">
            没有更多数据
        </p>
    </div>
</template>

<script>
import {request} from '@/utils'
import card from '@/components/card'
import topImage from '@/components/topSwiper'
export default {
    data () {
        return {
            list:[],
            page: 0,
            size: 10,
            more: true,
            topList:[]
        }
    },
    components: {
        card,
        topImage
    },
    onShow () {
        this.getList(true)
        this.getTop()
    },
    onPullDownRefresh () {  // 刷新回调函数
        this.getList(true)
        this.getTop()
    },
    onReachBottom () {
        if (!this.more) {
            return false
        }
        this.page = this.page + 1
        this.getList()
    },
    methods: {
        async getList(init) {
            if (init) {
                this.page = 0
                this.more = true
            }
            wx.showNavigationBarLoading()
            const books = await request('/weapp/booklist','GET',{
                page: this.page,
                size: this.size
            })
            if (books.list.length < 10 && this.page > 0) {
                this.more = false
            } 
            if (init){
                this.list = books.list
                wx.stopPullDownRefresh()
            }else {
                // 下拉刷新，不能直接覆盖books 而是累加
                this.list = this.list.concat(books.list)
                console.log(this.list)
            }
            wx.hideNavigationBarLoading()
        },
        async getTop () {
            const res = await request('/weapp/top','GET')
            this.topList = res.list
        }
    }
}
</script>

<style>

</style>
